<!DOCTYPE html>
<html>
<head>
	<title>css3D翻转</title>
	<script type="text/javascript">
		/*function removeWithoutCopy(arr, item) {
			for(i=0;i<arr.length;i++){
		        if(arr[i] == item){
		            arr.splice(i,1);
		        }
		    }
		    console.log(arr)
		}*/
		var ss='sdfdsafadf'
		
		console.log(ss.match(/sd.+?fa/))
	</script>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<style type="text/css">
		body{
			background-color: #eee;
		}
		#my{
			-webkit-perspective:1200;
			-webkit-perspective-origin:50% 30%;
			overflow: hidden;
		}
		#pagegroup{
			width: 260px;
			height: 240px;
			margin: 0px auto;
			margin-top: 100px;
			-webkit-transform-style:3d;
			position: relative;
		}
		.page{
			width: 260px;
			height: 200px;
			padding: 20px;
			border-radius: 10%;
			background-color: #000;
			color: #fff;
			font-weight: bold;
			font-size: 60px;
			line-height: 160px;
			text-align: center;
			position: absolute;
			z-index: 100;
		}
		#page1{
			-webkit-transform-origin:top;
			-webkit-transition:-webkit-transform 1s;
		}
		#page2,#page3,#page4,#page5,#page6,#page7{
			-webkit-transform-origin:top;
			-webkit-transition:-webkit-transform 0.6s linear;
			/*-webkit-transform:rotateX(-90deg);*/
		}
		#op{
			text-align: center;
		}
	</style>
	<script type="text/javascript">
		var curIndex = 1;
		function next(){
			if (curIndex < 7) {
				var curPage = document.getElementById('page'+curIndex);
				curPage.style.webkitTransform = "rotateX(270deg)";
				curIndex++;
				var nextPage = document.getElementById('page'+curIndex);
				nextPage.style.display = 'block';
				nextPage.style.webkitTransform = "rotateX(0deg)";
			}
		}
		function prev(){
			if (curIndex > 1) {
				var curPage = document.getElementById('page'+curIndex);
				curPage.style.webkitTransform = "rotateX(0deg)";
				curIndex--;
				var nextPage = document.getElementById('page'+curIndex);
				nextPage.style.webkitTransform = "rotateY(0deg)";
			}
			
		}
		
	</script>
</head>
<body>
	<div id="my">
		<div id="pagegroup">
			<div class="page" id="page7">星期日</div>
			<div class="page" id="page6">星期6</div>
			<div class="page" id="page5">星期5</div>
			<div class="page" id="page4">星期4</div>
			<div class="page" id="page3">星期3</div>
			<div class="page" id="page2">星期2</div>
			<div class="page" id="page1">星期1</div>
		</div>
	</div>
	<div id="op">
		<button class="btn btn-lg btn-success" onclick="prev()">上一页</button>
		<button class="btn btn-lg btn-danger" onclick="next()">下一页</button>
	</div>
</body>
</html>